<template>
    <div id="app">
        <el-card class="box-card">
            <el-descriptions title="用户信息" :column="3">
                <el-descriptions-item label="证件照">
                    <el-upload
                            class="avatar-uploader"
                            :headers="headerObj"
                            action="http://localhost:8088/upload/sure"
                            :show-file-list="false"
                            style="padding-left: 20px"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-descriptions-item>
                <el-descriptions-item label="账号">{{loginAdmin.account}}</el-descriptions-item>
                <el-descriptions-item label="姓名">
                    <el-input v-model="loginAdmin.name" ></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="身份证号">
                    <el-input v-model="loginAdmin.idCard"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="手机号">
                    <el-input v-model="loginAdmin.phone"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="加入时间">{{loginAdmin.createTime}}</el-descriptions-item>

                <el-descriptions-item label="状态">
                    <el-tag type="warning" size="mini" effect="dark" v-if="loginAdmin.state==1">在职</el-tag>
                    <el-tag type="info" effect="dark" size="mini" v-if="loginAdmin.state==0">离职</el-tag>
                </el-descriptions-item>

                <el-descriptions-item label="学历">{{loginAdmin.education }}</el-descriptions-item>


            </el-descriptions>
            <div class="text item">
                <el-collapse accordion>
                    <el-collapse-item title="详细信息" name="1">
                        <el-input v-model="loginAdmin.introduction"></el-input>
                    </el-collapse-item>
                    <el-collapse-item title="荣誉" name="2">
                        <el-input v-model="loginAdmin.prize"></el-input>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <div style="float: right ;margin-bottom: 20px">
                <el-button type="info"  size="mini" @click="docMyList" >返回</el-button>
                <el-button type="success"  size="mini" @click="updateAdmin" >确定修改</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "editMyList",
        data(){
            return{
                token:'',
                loginAdmin:{},
                imageUrl:'',
            }
        },
        mounted() {
            this.token = window.localStorage.getItem("token")
        },
        //在计算属性中添加上传文件的附加属性
        computed: {
            headerObj(){
                return{
                    // token:localStorage.getItem("token")
                    token: this.token
                };
            }
        },
        created() {
            this.initUser();
        },
        methods: {
            //初始化用户信息
            initUser(){
                this.$http.get("/system/admin/adminMS").then(result=>{
                    if(result.data.code === 200){
                        this.loginAdmin = result.data.data;
                        this.imageUrl = this.loginAdmin.hardUrl
                    }
                })
            },

            //修改用户信息
            updateAdmin(form){
                if(this.imageUrl != null && this.imageUrl !== ''){
                    this.loginAdmin.hardUrl = this.imageUrl;
                }
                this.$http.post("/system/admin/update",this.loginAdmin).then(resp=>{
                    if(resp.data.code === 200){
                        this.$message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success'
                        });
                        this.$router.push({ path: '/myList' })
                    }
                })
            },

            docMyList(){
                this.$router.push({ path: '/myList' })
            },

            //上传头像
            handleAvatarSuccess(res, file) {
                this.imageUrl = res.data;
                console.log(res.data);
            },

            //上传头像的限制条件
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

        },
    }
</script>

<style scoped>
    #app{
        border: 1px solid #DCDFE6;
        width: 800px;
        margin: 30px auto;
        padding: 35px 25px 15px 25px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        box-shadow: 0 0 25px #909399;
    }
    .text {
        font-size: 14px;
    }

    .el-input{
        width: 80%;margin-top: -10px;
    }

    .item {
        padding: 18px 0;
    }

    .box-card {
        width: 800px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 75px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
    .avatar {
        width: 75px;
        height: 100px;
        display: block;
    }
</style>
